﻿





//another huge selector here to ensure that the img that I need is
//being captured. 
//$(".thumbnailcontainer .scrollable .items img").click(function () {
$(document).on('click', '.thumbnailcontainer .scrollable .items img', function (e) {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    //I don't understand why I need this
    var url = $(this).attr("src").replace("_t", "");

    //ac code here	
    var $findalt = $(this).attr("src");
    var $firstindex = $findalt.lastIndexOf("/") + 1;
    var $lastindex = $findalt.indexOf(".");
    $findalt = $findalt.substring($firstindex, $lastindex);

    var $foundalt = "#" + $findalt;
    var $foundalt = $($foundalt);

    var $foundstrongText = $foundalt.find("strong").text();
    var $foundpText = $foundalt.find("p").text();
    var $foundahrefLink = $foundalt.find("a").attr("href");
    var $foundahrefText = $foundalt.find("a").text();

    var wrapOriginal = $("#image_wrap");
    wrapOriginal.find("strong").text($foundstrongText);
    wrapOriginal.find("p").text($foundpText);
    wrapOriginal.find("a").attr("href", $foundahrefLink);
    wrapOriginal.find("a").text($foundahrefText);
    //end ac code


    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();

    // call this function after it's loaded
    img.onload = function () {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);
    };

    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");


});
